<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


    </style>
</head>

<body>

    <svg width="850" height="650">

        <line x1="0" y1="600" x2="850" y2="600" stroke="#111" />

        <polygon points="830,620 830,580 850,600" style="fill:lime;stroke:purple;stroke-width:1" />

        <line x1="50" y1="650" x2="50" y2="0" stroke="#111" />

        <polygon points="30,20 70,20 50,0" style="fill:lime;stroke:purple;stroke-width:1" />


        <g id="g1">

        </g>

        <g id=g2>

        </g>

    </svg>



    <script>
        var data = [
            {
                day: "星期一",
                num: 800
            },
            {
                day: "星期二",
                num: 800
            },
            {
                day: "星期三",
                num: 1600
            },
            {
                day: "星期四",
                num: 2000
            },
            {
                day: "星期五",
                num: 4544
            },
            {
                day: "星期六",
                num: 300
            }]

        var g2 = document.querySelector("#g2");
        console.log(g2)
        let g2Inter = Math.floor(550 / 10);
        console.log(g2Inter)

        for (let i = 1; i <= g2Inter; i++) {
            let x1 = 50;
            let y1 = 600 - i * g2Inter
            let x2 = 80
            let y2 = y1;
            let str = `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#111" />
                         <text style="font-size:20" x="${x1 - 50}" y="${y1 + 5}" fill="#000">${i * 200}</text>
               `
            g2.innerHTML += str
        }




        var g1 = document.querySelector("#g1")
        let g1Inter = Math.floor(750 / 7);

        for (let i = 1; i <= data.length; i++) {
            let x1 = 50 + i * g1Inter;
            let y1 = 600;
            let x2 = x1;
            let y2 = 570;
            let x3 = x1;
            let y3 = 600 - data[i - 1]["num"] * (55 / 200)

            let str = `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#111" />
                    <text style="font-size:25" x="${x1 - 30}" y="${y1 + 30}" fill="#000">${data[i - 1].day}</text>
                  
                     <rect x="${x3}" y="${y3}" width="20" height="${600-y3}"
                           style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
                         stroke-opacity:0.9"/>
          `;
            g1.innerHTML += str
        }














    </script>


</body>

</html>